<template>
  <!-- 标签页组件 -->
  <div class="main">
    <el-footer>
      <el-scrollbar ref="scrollbar">
        <div class="tagPuls">
          <!-- 下拉标签 -->
          <!-- 优化 把 @visible-change 改成 @contextmenu -->
          <el-dropdown trigger="contextmenu" @command="dropdown" ref="dropdown" @contextmenu="dropdowns(index, $event)" v-for="(item, index) in tags" :key="index">
            <el-tag @close="delTag(index)" class="mx-1" :class="$route.meta.title == item.title ? 'active' : ''" :closable="index != 0" @click="tagCut(item.path, index)">
              <i :class="$route.meta.title == item.title ? pictag : ''"></i>
              {{ item.title }}
            </el-tag>

            <template #dropdown>
              <el-dropdown-menu>
                <!-- command	派发到command回调函数的指令参数 -->
                <el-dropdown-item class="iconfont icon-shuaxin" :command="{ path: item.path, index, id: 0 }">刷新</el-dropdown-item>
                <el-dropdown-item class="iconfont icon-guanbi" :command="{ path: item.path, index, id: 1 }" :disabled="this.tags.length == index + 1">关闭右侧标签</el-dropdown-item>
                <el-dropdown-item class="iconfont icon-guanbi1" :command="{ path: item.path, index, id: 2 }">全部关闭</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <!-- 下拉标签结束 -->
        </div>
      </el-scrollbar>
    </el-footer>
    <!-- 标签页结束 -->
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex"
export default {
  created() {
    // 实例创建完成后初始化
    this.newtag(this.$route)
  },

  data() {
    return {
      pictag: 'iconfont icon-icon-icon-dingwei tag', // 标签页图标
    }
  },

  // 组件传值
  props: ['colors'],
  computed: {
    ...mapGetters(['tags'])
  },

  methods: {
    // 新增标签页
    ...mapActions(['newtag', 'delTag']),



    // 新增标签页
    // newtag(item) {
    //   // 判断这些页面不加标签

    //   // DOM循环更新结束后获取最新的DOM节点 设置滚动条 update() 更新
    //   this.$nextTick(() => {
    //     // 回调函数
    //     this.$refs.scrollbar.update()
    //   })
    // },
    // 切换标签
    tagCut(path, index) {
      if (index == 0) {
        // 首页
        this.$router.push('/Index')
        return
      }
      this.$router.push({ path })
    },
    // 删除标签页
    // delTag(item, index) {
    //   this.tags.splice(index, 1) // 删除数组下标
    //   if (index == this.tags.length) {
    //     this.$router.push(this.tags[index - 1].path)
    //   } else this.$router.push(this.tags[index].path)
    // },
    // 点击菜单项触发的事件回调
    dropdown(data) {
      // 判断id选择哪个
      switch (data.id) {
        case 0:
          // 刷新
          this.$router.push({ path: '/Kong/' + data.path })
          break
        case 1:
          this.tags.splice(data.index + 1)
          this.$router.push({ path: data.path })

          break
        case 2:
          this.tags.splice(1)
          this.$router.push({ path: this.tags[0].path })
          break
      }
    },

    // 下拉框出现/隐藏时反复触发
    dropdowns(index, e) {
      // 方法一:
      // if (!e) {
      //   //隐藏时不触发
      //   return;
      // }
      // for (const key in this.$refs.dropdown) {
      //   if (key != index) {
      //     //不等于当前就关闭其他的
      //     this.$refs.dropdown[key].handleClose(); //关闭
      //   }
      // }

      //  方法二:
      // 右击时在屏幕上触发点击事件;
      document.body.click()
    }
    // 标签页结束
  },

  // 监听路由
  watch: {
    $route(v) {
      this.newtag(v)
    }
  }
}
</script>

<style lang="less" scoped>
.mian {
  // 标签页
  // .tag {
  //   //选中改变颜色
  //   color: #fff !important;
  //   background-color: #6eb6f6 !important;
  //   .el-dropdown {
  //     color: white;
  //   }
  // }
  display: flex;
  align-items: center; //图片文字居中
  .el-footer {
    //标签页
    height: 40px;
    border-top: #cccccc 1px solid;
    border-bottom: #cccccc 1px solid;
    padding-left: 20 px;

    & .tagPuls {
      height: 40px;
      display: flex;
      align-items: center; //图片文字居中
      // margin-top: 7.5px;

      .mx-1 {
        color: black !important;
        background: white;
        border: #cccccc 1px solid;
        margin-right: 10px;

        & /deep/ .el-icon {
          color: black !important;
        }
      }
      & .active {
        //选中变色
        background: #409eff;
      }
    }
  }
}
</style>
